<template>
    <q-carousel
        :keep-alive="true"
        animated
        v-model="slide"
        infinite
        :vertical="true"
        transition-prev="slide-right"
        transition-next="slide-left"
        height="260px"
    >
      <q-carousel-slide :name="n" v-for="n in content.length" :key="n">
        <aplusmax-sample-goods v-for="(good, index) in content[n-1]" :key="index" :good="good"></aplusmax-sample-goods>
      </q-carousel-slide>
    </q-carousel>
  <aplusmax-select :count="content.length" :active="slide" :prev="prve" :next="next" :slide_position="slide_position"></aplusmax-select>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref, reactive} from 'vue'

defineProps({
})
const content = reactive([
    [
      {id: 1, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Pasta & Noodles"},
      {id: 2, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 3, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 4, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 5, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 6, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
    ],
    [
      {id: 1, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Pasta & Noodles"},
      {id: 2, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 3, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 4, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 5, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 6, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
    ],
    [
      {id: 1, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Pasta & Noodles"},
      {id: 2, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 3, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 4, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 5, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 6, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
    ],
    [
      {id: 1, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Pasta & Noodles"},
      {id: 2, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 3, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 4, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 5, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 6, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
    ],
    [
      {id: 1, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Pasta & Noodles"},
      {id: 2, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 3, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 4, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 5, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
      {id: 6, src: "http://localhost:8888/src/assets/images/cat4.png", name: "Grains & Beans"},
    ],
])
const slide = ref(1)

const emit = defineEmits([])

const prve = () => {
  slide.value -= 1
}

const next = () => {
  slide.value += 1
}

const slide_position = (position) => {
  if (Array.from({ length: content.length }, (_, index) => index+1).includes(position)){
    slide.value = position
  }
}

defineExpose({})
</script>


<style scoped lang="less">
.q-carousel{
  height: unset;
}
.q-carousel__slide{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(16.6% - 50px), 1fr));
  grid-column-gap: 50px;
  padding: unset;
}
</style>
